<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="添加量表">
				<view slot="center" class="navTitle">
					添加量表
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="search">
							<view class="ico">
								<image src="@/static/images/icon-search.png" mode="aspectFit"></image>
							</view>
							<input type="text" v-model="keyword" placeholder="请输入关键字" confirm-type="search"
								@confirm="search" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex1 pd30" style="padding-bottom: 40rpx;">
			<scroll-view scroll-y="true" @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView"
				@scrolltolower="loadMore">
				<view class="">
					<view class="lessonList">
						<view class="item" v-for="(o,index) in list" :key="index"
						:class="selectedIds.includes(o.id)?'active':''" 
						@tap="setValue(o.id)">
							<text>{{o.title}}</text>
							<view class="ico">
								<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx"
						:status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>
		<view class="flex0 pd30 ftools">
			<view class="btn on" @tap="checkSelect">
				<view class="p">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow: function() {},
		data() {
			return {
				oldScrollTop: 0,
				scrollTop: 0,
				list: [],
				selectedIds: [],
				keyword: '',
				pageSize: 15,
				total: 1,
				pageIndex: 1,
				isLoading: false
			}
		},
		methods: {
			setValue(id){
				const that=this;
				if(that.selectedIds.includes(id)){
					let index=that.selectedIds.indexOf(id);
					that.selectedIds.splice(index,1);
				}else{
					that.selectedIds.push(id)
				};
			},
			checkSelect(){//确认选项
				var that=this;
				let ops=that.list.filter(i=>{return that.selectedIds.includes(i.id)});
				ops.map(j=>{j.messageType=8});
				uni.setStorage({
					key:"cepingTemp",
					data:JSON.stringify(ops),
					success() {
						uni.navigateBack();
					}
				})
			},
			updateScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			search() {
				var that = this;
				that.list = [];
				that.selectedIds=[];
				that.pageIndex = 1;
				that.scrollTop = that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList() {
				var that = this;
				if (that.isLoading) {
					return;
				};
				that.isLoading = true;
				let timer = setTimeout(function() {
					//请求开始
					var res = {
						list: [{
								id: 101,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 102,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 103,
								title: '心理健康诊断测验'
							},
							{
								id: 104,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 105,
								title: '心理健康诊断测验'
							},
							{
								id: 106,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 107,
								title: '心理健康诊断测验'
							},
							{
								id: 108,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 109,
								title: '心理健康诊断测验'
							},
							{
								id: 110,
								title: '心理健康诊断测验'
							},
							{
								id: 111,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 112,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 113,
								title: '心理健康诊断测验'
							},
							{
								id: 114,
								title: '广泛性焦虑障碍量表'
							},
							{
								id: 115,
								title: '广泛性焦虑障碍量表'
							}
						],
						total: 20
					};
					var arr = that.list.concat(res.list);
					that.list = arr;
					that.total = res.total;
					that.isLoading = false;
					//end
					clearTimeout(timer);
				}, 2000);
			},
			loadMore() {
				var that = this;
				if (that.list.length < that.total && !that.isLoading) {
					that.pageIndex++;
					that.getList();
				}
			}
		},
		mounted() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.filterBlock {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		.block {
			.search {
				background: #fff;
				border-color: #fff;
			}

			&.filters {
				padding: 10rpx 20rpx;
				margin-top: 20rpx;
				background: #fff;
				border-radius: 30rpx 30rpx 0 0;
			}
		}
	}

	.lessonList{
		padding: 0 30rpx;
		.item{
			position: relative;
			border: 2rpx solid #f9f6f0;
			background: #f4f6f9;
			border-radius: 10rpx;
			overflow: hidden;
			line-height: 1.4;
			font-size: 28rpx;
			color: #7a6458;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			.ico{
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 5;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding-left: 10rpx;
				padding-top: 18rpx;
				visibility: hidden;
				&:after{
					content: "";
					position: absolute;
					bottom: 0;
					right: 0;
					border-left: 40rpx solid transparent;
					border-bottom: 40rpx solid #fe9c29;
					z-index: -1;
				}
				image{
					display: block;
					width: 20rpx;
					height: 14rpx;
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
			&.active{
				border-color: #fe9c29;
				background: #ffefdd;
				color: #fe9c29;
				.ico{
					visibility: visible;
				}
			}
		}
	}

	.scrollView {
		box-sizing: border-box;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		background: #fff;
		border-radius: 30rpx;
	}

	.ftools {
		padding-top: 40rpx;
		padding-bottom: 60rpx;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		align-items: center;

		.btn {
			flex: 0 0 auto;
			font-size: 28rpx;
			padding: 0 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fe9c29;
			background: #ffefdd;
			height: 90rpx;
			border-radius: 90rpx;
			margin-right: 20rpx;

			.ico {
				flex: 0 0 auto;
				margin-right: 20rpx;

				image {
					display: block;
					width: 34rpx;
					height: 34rpx;
				}
			}

			&.on {
				background: #fe9c29;
				color: #fff;
				flex: 1 1 auto;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>